<template>
	<view class="record-box" v-if="Object.keys(state.recordObj).length > 0" :style="{
        [props.data?.style?.align || 'left']: 0,
        top: `${props.data?.style?.top || 20}%`
    }">
		<image class="img" :src="state.recordObj?.avatar || handleStaticResources('/static/images/empty/noImage.jpg')">
		</image>
		<text class="tit">{{state.recordObj?.nickname}}，{{state.recordObj?.createTime}}{{state.recordObj?.desc}}</text>
	</view>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { queryRecord } from '@/core/api';
	import type { Response, RecordType } from '@/core/models'
	import { handleStaticResources } from '@/core/utils'
	import { onHide } from '@dcloudio/uni-app';
	import { onHomePageShow } from '@/core/consts';

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {},
	});

	const state = reactive<{
		recordObj : RecordType,
		times : any;
	}>({
		recordObj: {},
		times: "",
	})

	// 获取日志
	const getRecord = async () => {
		const record : Response<RecordType> = await queryRecord({
			type: 'home',
			value: 0,
		});
		if (record.status && record.data) {
			state.recordObj = record?.data;
		};
	}

	const query = () => {
		getRecord();
		state.times = setInterval(() => {
			getRecord();
		}, 3000)
	}

	onMounted(() => {
		query();
		/** 监听页面onshow事件 */
		uni.$on(onHomePageShow, () => {
			query();
		});
	})

	onHide(() => {
		clearInterval(state.times);
	})
</script>
<style lang="scss" scoped>
	@import './home-record.scss';
</style>